<template>
  <view class="restaurant-page">
    <!-- 其他代码保持不变 -->
    
    <!-- 购物车弹出层 -->
    <view class="cart-popup" v-show="showCart">
      <view class="cart-header">
        <text class="cart-title">购物车</text>
        <text class="clear-cart" @click="clearCart">清空购物车</text>
      </view>
      <scroll-view class="cart-list" scroll-y>
        <view v-if="!cartItems?.length" class="empty-cart">
          <text>购物车是空的</text>
        </view>
        <template v-else>
          <view class="cart-item" v-for="item in cartItems" :key="item.id">
            <view class="item-info">
              <text class="item-name">{{ item.name }}</text>
              <text class="item-price">¥{{ item.currentPrice }}</text>
            </view>
            <view class="item-controls">
              <text class="control-btn minus" @click="decreaseQuantity(item)">-</text>
              <text class="quantity">{{ item.quantity }}</text>
              <text class="control-btn plus" @click="increaseQuantity(item)">+</text>
            </view>
          </view>
        </template>
      </scroll-view>
    </view>
    <!-- 遮罩层 -->
    <view class="mask" v-show="showCart" @click="closeCart"></view>
    
    <!-- 底部固定栏（整合配送信息和购物车） -->
    <view class="fixed-footer">
      <!-- 配送信息 -->
      <view class="delivery-info">
        <text>¥{{ deliveryFee }} 免配送费</text>
        <text>¥{{ minOrder }}起送</text>
      </view>
      <!-- 购物车区域 -->
      <view class="cart-area">
        <view class="cart-icon" :class="{ active: cartTotal > 0 }" @tap="handleCartClick">
          <text class="iconfont icon-cart">🛒</text>
          <view class="cart-badge" v-if="cartTotal > 0">{{ cartTotal }}</view>
        </view>
        <button class="checkout-btn" :class="{ active: cartTotalPrice >= minOrder }" @tap="goToCheckout">
          <text v-if="cartTotalPrice < minOrder">¥{{ minOrder }}起送</text>
          <text v-else>去结算</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, inject, computed } from 'vue'

const cart = inject('cart')
const showCart = ref(false)

// 使用注入的购物车数据
const cartTotal = computed(() => cart.total.value)
const cartTotalPrice = computed(() => cart.totalPrice.value)

// 前往结算页
const goToCheckout = () => {
  if (cartTotal.value === 0) {
    uni.showToast({
      title: '购物车为空',
      icon: 'none'
    })
    return
  }
  // 实际项目中跳转到结算页面
  uni.navigateTo({ url: '/pages/checkout/index' })
}

// 切换购物车显示状态
const toggleCart = () => {
  if (cartTotal.value > 0) {
    showCart.value = !showCart.value
  }
}

// 增加商品数量
const increaseQuantity = (item) => {
  // 实现增加商品数量的逻辑
}

// 减少商品数量
const decreaseQuantity = (item) => {
  // 实现减少商品数量的逻辑
}

// 清空购物车
const clearCart = () => {
  // 实现清空购物车的逻辑
  showCart.value = false
}

// 处理购物车点击
const handleCartClick = () => {
  console.log('Cart clicked', cartTotal.value) // 添加调试日志
  if (cartTotal.value > 0) {
    showCart.value = !showCart.value
    console.log('Show cart:', showCart.value) // 添加调试日志
  }
}

// 关闭购物车
const closeCart = () => {
  showCart.value = false
}
</script>


<style scoped>
.delivery-footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background: #fff;
  border-top: 1px solid #f5f5f5;
  font-size: 26rpx;
  color: #666;
}
.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  border-top: 1px solid #f5f5f5;
  z-index: 100;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.delivery-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: #666;
}

.cart-area {
  display: flex;
  align-items: center;
}

.cart-icon {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.cart-text {
  font-size: 28rpx;
  color: #333;
}

.cart-count {
  position: absolute;
  top: -16rpx;
  right: -16rpx;
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  background: #ff4d4f;
  color: #fff;
  border-radius: 50%;
  font-size: 20rpx;
}

.checkout-btn {
  background: #ff6700;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  padding: 12rpx 30rpx;
  font-size: 28rpx;
  margin-left: 20rpx;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 98;
}

.cart-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 100rpx;
  background: #fff;
  z-index: 99;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}

.cart-header {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #f5f5f5;
}

.cart-title {
  font-weight: bold;
}

.clear-cart {
  color: #999;
  font-size: 28rpx;
}

.cart-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 30rpx;
  max-height: 50vh;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 28rpx;
}

.item-price {
  color: #ff6700;
  margin-left: 20rpx;
}

.item-controls {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.control-btn {
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background: #f5f5f5;
  border-radius: 50%;
}

.quantity {
  font-size: 28rpx;
  min-width: 40rpx;
  text-align: center;
}

.iconfont {
  font-size: 50rpx;
  color: #fff;
}

.cart-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #ff4d4f;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  min-width: 32rpx;
  text-align: center;
}

.checkout-btn.active {
  background: #ffd161;
  color: #333;
}

.empty-cart {
  text-align: center;
  padding: 40rpx;
  color: #999;
}
</style>